<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title><ui:insert name="title">KSC University</ui:insert></title>
        <h:outputStylesheet name="css/mainStyle.css"/>
        <h:outputStylesheet name="css/bannerStyle.css"/>
       
        <h:outputScript name="js/jquery-1.7.1.js"/>
        <h:outputScript name="js/jquery.ui.core.js"/>
        <h:outputScript name="js/jquery.ui.widget.js"/>
        <h:outputScript name="js/jquery.ui.rcarousel.js"/>
        <h:outputScript name="js/script.js"/>
        <script type="text/javascript">
            /* <![CDATA[[ */
			jQuery(function($) {
				function generatePages() {
					var _total, i, _link;
					
					_total = $( "#carousel" ).rcarousel( "getTotalPages" );
					
					for ( i = 0; i < _total; i++ ) {
						_link = $( "<a href='#'></a>" );
						
						$(_link)
							.bind("click", {page: i},
								function( event ) {
									$( "#carousel" ).rcarousel( "goToPage", event.data.page );
									event.preventDefault();
								}
							)
							.addClass( "bullet off" )
							.appendTo( "#pages" );
					}
					
					// mark first page as active
					$( "a:eq(0)", "#pages" )
						.removeClass( "off" )
						.addClass( "on" )
						.css( "background-image", "url(../image/page-on.png)" );

				}

				function pageLoaded( event, data ) {
					$( "a.on", "#pages" )
						.removeClass( "on" )
						.css( "background-image", "url(../image/page-off.png)" );

					$( "a", "#pages" )
						.eq( data.page )
						.addClass( "on" )
						.css( "background-image", "url(../image/page-on.png)" );
				}
				
				$("#carousel").rcarousel(
					{
						visible: 1,
						step: 1,
						speed: 700,
						auto: {
							enabled: true
						},
						width: 919,
						height: 370,
						start: generatePages,
						pageLoaded: pageLoaded
					}
				);
				
				$( "#ui-carousel-next" )
					.add( "#ui-carousel-prev" )
					.add( ".bullet" )
					.hover(
						function() {
							$( this ).css( "opacity", 0.7 );
						},
						function() {
							$( this ).css( "opacity", 1.0 );
						}
					);
			});
                        /* ]]>*/
		</script>
        

    </h:head>

    <h:body>
        <div id="wrapper">
	<div id="header"><!-- TemplateBeginEditable name="WelcomeMessage" -->
	  <div id="siteWelMss">
	    <p class="siteWel">Welcome, Guest</p>
            <p class="siteWel"><a href="">(Login)</a> | <a href="event/List.jsf">(Register)</a></p>
    </div>
	<!-- TemplateEndEditable --></div>
    <div id="navMenu">
   	  <div id="prenavMenu"></div>
      <div class="navMenuSep"></div>
	  <div class="navMenuItems"><a href="">HOME</a></div>
      <div class="navMenuSep"></div>
	  <div class="navMenuItems"><a href="">EVENTS</a></div>
      <div class="navMenuSep"></div>
	  <div class="navMenuItems"><a href="">MY ACCOUNT</a></div>
      <div class="navMenuSep"></div>
	  <div class="navMenuItems"><a href="">ABOUT US</a></div>
      <div class="navMenuSep"></div>
	  <div class="navMenuItems"><a href="">CONTACT US</a></div>
      <div class="navMenuSep"></div>
	  <div class="navMenuItems"><a href="">FAQ</a></div>
      <div class="navMenuSep"></div>
	  <div class="navMenuItems"><a href="">SITEMAP</a></div>
      <div class="navMenuSep"></div>
    </div>
  <div id="slid">
      <div class="slid_lr">
          <img src="#{facesContext.externalContext.request.contextPath}/resources/image/leftSlider.png" alt="" width="44" height="422"/>
      </div>
      <div id="slidCov">
        <div id="slid_top"></div>
          <div id="slid_main">
            <div id="container">
                        <div id="carousel">
                            <c:forEach items="#{eventController.topFreeNews}" var="fr">
                                <div id="slide01" class="slide">
                                <img src="#{facesContext.externalContext.request.contextPath}/resources/image/${fr.imageurl}" />
                                <div class="text">
                                    <h1>${fr.topic}</h1>
                                    <div class="bntxt">Speaker: ${fr.speakerID.person.firstName}</div>
                                    <div class="bntxt"><span class="redcl">Free</span></div>
                                    <div id="bnMorehere"><a href="">More here...</a></div>
                                    <div id="bnMorehere"><a href="">More free event here...</a></div>
                                </div>
                            </div>
                            </c:forEach>
                                 
                        </div>
                        <a href="#" id="ui-carousel-next"><span>next</span></a>
                        <a href="#" name="ui-carousel-prev" id="ui-carousel-prev"><span>prev</span></a>
                        <div id="pages"></div>
            </div>
        </div>
        <div id="slid_bot1"></div>
        <div id="slid_bot2"></div>
      </div>
    <div class="slid_lr">
         <img src="#{facesContext.externalContext.request.contextPath}/resources/image/rightSlider.png" alt="" width="44" height="422"  />
    </div>    
  </div>
  <div id="mnLeft">
    <div id="mnLeftSearch">
       	  <div id="mnLeftSearchtb">
          	<input name="" type="text" value="Search Site" />            
          </div>
          <div id="mnLeftSearchbt">
              
              <img src="#{facesContext.externalContext.request.contextPath}/resources/image/search.png" alt="" width="40" height="40"/>
          </div>
          <div class="sepHor"></div>
        </div>
    <div class="mnLeftTitles">Category</div>
    <div class="mnLeftIcon">
        
        <img src="#{facesContext.externalContext.request.contextPath}/resources/image/flag.png" alt="" width="38" height="48"/>
    </div>
        <div class="mnLeftTxt"><a href="">Semina</a></div>
        <div class="mnLeftTxt"><a href="">Techno-feat</a></div>
        <div class="mnLeftTxt"><a href="">Symposium</a></div>
        <div class="sepHor"></div>
    <div class="mnLeftTitles">Speaker</div>
    <div class="mnLeftIcon">
       
        <img src="#{facesContext.externalContext.request.contextPath}/resources/image/speaker.png" alt="" width="48" height="48" />
    </div>
    <div id="spkTitle"><a href="">Dr. Ben Bartlett</a></div>
    <div class="mnLeftTxtAuto">Dr. Ben Bartlett is an owner of Log Cabin Livestock, where he raises cattle and sheep. He is also a consultant that works with farmers 
on new enterprise assessments, grazing, and low stress handling. </div>
	<div class="mnLeftMorehere"><a href="">Continue reading...</a></div>
    <div class="mnLeftMorehere"><a href="">More Speaker here...</a></div>
    <div class="sepHor"></div>
    <div class="mnLeftTitles">Lastest Prize</div>
    <div class="mnLeftIcon">
         
          <img src="#{facesContext.externalContext.request.contextPath}/resources/image/prize.png" alt="" width="50" height="50"/>
    </div>
    <div id="spkTitle">“ELECTROMAGNETIC FIELD 2012”</div>
    <div class="mnLeftpz1">1st</div>
    <div class="mnLeftpz2">: Adam Lambert</div>
    <div class="mnLeftpz1"></div>
    <div class="mnLeftpz3">adamlambert@gmail.com</div>
    
    <div class="mnLeftpz1">2st</div>
    <div class="mnLeftpz2">: Nancy Davolio</div>
    <div class="mnLeftpz1"></div>
    <div class="mnLeftpz3">davolio@gmai.com</div>
    
    
    <div class="mnLeftpz1">3rd</div>
    <div class="mnLeftpz2">: Kate Moss</div>
    <div class="mnLeftpz1"></div>
    <div class="mnLeftpz3">katemoss@gmai.com</div>
    
    <div class="mnLeftMorehere"><a href="">Details...</a></div>
    <div class="mnLeftMorehereSp"><a href="">More prizes here...</a></div>
    <div class="sepHor"></div>
    
     <div class="mnLeftTitles">Subcribe</div>
    <div class="mnLeftIcon">
        <img src="#{facesContext.externalContext.request.contextPath}/resources/image/flag.png" alt="" width="38" height="48"/>
    </div>
    <div id="mnLeftSearch">
       	  <div id="mnLeftSearchtb">
          	<input name="" type="text" value="Search Site" />            
          </div>
          <div id="mnLeftSearchbt">
              <img src="#{facesContext.externalContext.request.contextPath}/resources/image/subcribe.png" alt="" width="40" height="40"/>
          </div>
          
        </div>
   	<div id="tempEmp"></div>
  </div>
  <!-- TemplateBeginEditable name="mainContent" -->
  <div id="mainContent">
      <ui:insert name="body">Main Content</ui:insert>
  </div>
  <!-- TemplateEndEditable -->
  <div id="footerTop">
  	<div class="footerTxt"><a href="">HOME</a></div>
    <div class="footerTxt"><a href="">EVENTS</a></div>
    <div class="footerTxt"><a href="">MY ACCOUNT</a></div>
    <div class="footerTxt"><a href="">SPEAKER</a></div>
    <div class="footerTxt"><a href="">PRIZE</a></div>
    <div class="footerTxt"><a href="">ABOUT US</a></div>
    <div class="footerTxt"><a href="">CONTACT US</a></div>
    <div class="footerTxt"><a href="">FAQ</a></div>
    <div class="footerTxt"><a href="">SITEMAP</a></div>
  </div>
  <div id="footer">KSC University Of Technology and Sciences © 2012 Privacy Policy </div>
</div>
    </h:body>

</html>
